<template>
  <div id="customerService">
    <div class="bg">
      <ul>
        <li :class="item.class" v-for="(item,index) in list" :key="index">
          <img :src="item.src" alt>
          <div>{{item.count}}</div>
        </li>
      </ul>
      <div id="sub">
        <input type="text" v-model="msg">
        <div @click="sub">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "customerService",
  data() {
    return {
      msg: "",
      headerImg: require("@/assets/img/img_tx_grzx.png"),
      list: [
        /*{
                  class:"otherParty",
                  src:require("@/assets/img/img_tx_grzx.png"),
                  count:"打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了"
                },
              {
                class:"self",
                src:require("@/assets/img/img_tx_grzx.png"),
                count:"打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了"
              },
              {
                class:"self",
                src:require("@/assets/img/img_tx_grzx.png"),
                count:"打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了打扰了"
              },*/
      ]
    };
  },
  mounted: function() {
    var wsLogin = "ws://paotuis.free.idcfengye.com/paotui/echoFriends";
    var ws = new WebSocket(wsLogin);
    ws.onopen = function() {
      // Web Socket 已连接上，使用 send() 方法发送数据
      var msg = '{"type":"text"}';
      var msg =
        '{"type":"text","sendfrom":"' +
        localStorage.getItem("userid") +
        '","coverUserId":"2018B01129Jf1108KF16","concent":"好嗨呦}';
      ws.send(msg);
    };
  },
  methods: {
    sub() {
      var $this = this;
      if ($this.msg != "") {
        $this.list.push({
          class: "self",
          src: $this.headerImg,
          count: $this.msg
        });
        $this.msg = "";
      }
    }
  }
};
</script>

<style scoped>
.bg {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #e5e5e5;
  overflow: scroll;
  padding-bottom: 60px;
}
#sub {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
#sub > input {
  width: 75%;
  position: relative;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  padding-left: 8px;
  top: 1px;
}
#sub > div {
  float: right;
  position: relative;
  right: 5%;
  font-size: 14px;
  padding: 3px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}
.bg > ul > li:first-child {
  margin-top: 60px;
}
.bg > ul > li {
  margin-top: 20px;
}
.bg > ul > li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.otherParty {
  width: 100%;
}
.otherParty > img {
  display: block;
  float: left;
  width: 12%;
}
.otherParty > div {
  float: left;
  max-width: 40%;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 15px;
  text-align: left;
  letter-spacing: 1px;
  position: relative;
  top: 3px;
  left: 3px;
}
.self {
  width: 100%;
}
.self > img {
  display: block;
  float: right;
  width: 12%;
}
.self > div {
  float: right;
  max-width: 40%;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 15px;
  text-align: left;
  letter-spacing: 1px;
  position: relative;
  top: 3px;
  right: 3px;
}
</style>
